<template>
  <!-- 属性管理页面  attribute属性 -->


  <div class="attribute-box">
    <!-- 数据列表   添加按钮 -->
    <div class="add-box">
      <div class="icon">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div>
        <el-button type="primary" @click="toAddType">添加</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" prop="id" label="编号" width="100" />
        <el-table-column align="center" prop="name" label="类型名称" />
        <el-table-column align="center" prop="attributeCount" label="属性数量" />
        <el-table-column align="center" prop="paramCount" label="参数数量" />
        <el-table-column align="center" label="设置">
          <template #default="{ row }">
            <el-button @click="toCheckPrdAttrList(row.id, row.name, 0)">属性列表</el-button>
            <el-button @click="toCheckPrdAttrList(row.id, row.name, 1)">参数列表</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <el-button @click="toEditType(row.id, row.name)">编辑</el-button>
            <el-button type='danger' @click="toDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 组件 -->
    <div class="pagination-box">
      <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
        :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
        :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- EditType子组件  添加/编辑类型  窗口 -->
    <EditType :dialogTypeVisible="dialogTypeVisible" :id="currentId" :name="currentName" @cancel="doCancelFn"
      @confirm="doConfirmFn"></EditType>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import * as http from '@/request/http';
import router from '@/router';
import EditType from './EditType.vue';
import { ElMessage, ElMessageBox } from 'element-plus';


// 表格数据
const tableData = ref<IAttributeModel[]>([]);

// 分页器相关参数
const paginationParams = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 30,
})

// 抽离  获取属性列表 请求方法
const queryAttributeList = () => {
  http.attribute.getAttributeList({
    pageNum: paginationParams.currentPage,
    pageSize: paginationParams.pageSize,
  }).then(res => {
    if (res.code === 200) {
      console.log('属性列表 :', res);
      tableData.value = res.data.list;   // 表格数据
      paginationParams.total = res.data.total;   // 分页器总数
    }
  })
}
// 发送请求  获取  属性列表  更新表格数据
queryAttributeList();

// 改变 分页器的页容量
const handleSizeChange = (val: number) => {
  paginationParams.pageSize = val;
  // 重新请求    更新数据
  queryAttributeList();
};

// 改变 分页器的当前页
const handleCurrentChange = (val: number) => {
  paginationParams.currentPage = val;
  // 重新请求  更新数据
  queryAttributeList();
};


// 点击 (type:0 属性列表) / (type:1 参数列表)
const toCheckPrdAttrList = (cid: number, cname: string, type: number) => {
  if (type === 0) {
    // 0 属性列表(跳转路径一样,query传参的type参数不一样)

    // 跳转到 查看属性列表页面  /pms/productAttrList
    router.push(`/pms/productAttrList?cid=${cid}&cname=${cname}&type=0`);

  } else if (type === 1) {
    // 1 参数列表(跳转路径一样,query传参的type参数不一样)

    // 跳转到 查看属性列表页面  /pms/productAttrList
    router.push(`/pms/productAttrList?cid=${cid}&cname=${cname}&type=1`);
  }
}


// EditType子组件  添加/编辑类型  窗口 相关数据
const dialogTypeVisible = ref(false);

// 需要传递给 子组件 的 当前属性分类的id
const currentId = ref(0);

// 点击编辑时 需要传递 给 弹窗子组件的 当前编辑的类型名称 name
const currentName = ref<string>('');

// 点击 添加  按钮
const toAddType = () => {
  // 添加时id是0
  currentId.value = 0;
  // 添加时 name也是空的
  currentName.value = '';
  // 打开弹窗
  dialogTypeVisible.value = true;
};

// 点击 编辑 按钮
const toEditType = (id: number, name: string) => {
  // 将当前编辑的 属性分类的id 传过去
  currentId.value = id;
  // 编辑的时候将 类型名称name 传给弹窗组件
  currentName.value = name;
  // 打开弹窗
  dialogTypeVisible.value = true;
}

// 点击 删除 删除当前 属性分类
const toDelete = (id: number) => {
  // 删除 操作 还是要严谨一点  让用户进行二次确认
  ElMessageBox.confirm(
    `是否要进行删除操作 ?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 
    http.attribute.deleteAttributeCategory(id).then(res => {
      if (res.code === 200) {
        // 删除请求  成功后  再次请求表格数据  更新
        queryAttributeList();
        // 提示用户 删除成功
        ElMessage.success('删除成功');
      }
    })
  }).catch(() => {
    // ElMessage.warning('取消删除');
  })
}

// 监听 子组件EditProduct 的 自定义事件cancel 
const doCancelFn = () => {
  // 将id复原为0
  currentId.value = 0;
  dialogTypeVisible.value = false;  // 关闭窗口
}

// 监听 子组件EditProduct 的 自定义事件confirm
const doConfirmFn = () => {
  dialogTypeVisible.value = false;  // 关闭窗口
  // 再次发送请求  更新数据
  queryAttributeList();
}
</script>

<style scoped lang="less">
.attribute-box {

  // 添加 按钮
  .add-box {
    padding: 20px;
    margin: 20px 0;
    // border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
      display: flex;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }
  }

  // 表格
  // .table-box {
  //   padding: 5px;
  //   // border: 1px solid #ccc;
  //   box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  // }

  // 分页器
  .pagination-box {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 0;
  }
}
</style>